<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>个人中心-捐赠书籍</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<link href="/Public/Admin/css/bootstrap.min.css" rel="stylesheet">
<link href="/Public/Admin/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/Public/Admin/js/bootstrap-datepicker/bootstrap-datepicker3.min.css" rel="stylesheet">
<link href="/Public/Admin/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="/Public/Admin/js/bootstrap-clockpicker/bootstrap-clockpicker.min.css" rel="stylesheet">
<!--标签插件-->
<link rel="stylesheet" href="/Public/Admin/js/jquery-tagsinput/jquery.tagsinput.min.css">
<link href="/Public/Admin/css/style.min.css" rel="stylesheet">
<style>
    .hidden{
    display: none;
    transition: 0.5s;
}
</style>
</head>
<body>
<div class="container-fluid p-t-15">
  <div class="col-lg-12">
    <div class="card">
      <header class="card-header">
        <div class="card-title">步骤</div>
      </header>
      <div class="card-body">
        <ul class="nav nav-step nav-fill">
          <li class="nav-item"> <span>捐款人信息添加</span> <a id="step1" class="nav-link active" href="#"></a> </li>
          <li class="nav-item"> <span>捐赠书籍添加</span> <a id="step2" class="nav-link" href="#"></a> </li>
          <li class="nav-item"> <span>完成</span> <a id="step3" class="nav-link" href="#"></a> </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6">
      <div class="card">
        <div class="card-body">
        <div id="donate" class="donate">
          <form name="addDonate" id="addDonate" class="addDonate">
            <div class="form-group col-md-12">
              <label for="nickname">捐赠人姓名</label>
              <input class="form-control" type="text" id="nickname" name="nickname" placeholder="为空则为您的昵称" value="" />
            </div>
            <div class="form-group col-md-12">
              <label for="contact">联系方式</label>
              <input class="form-control" type="text" id="contact" name="contact" placeholder="为空则为您的预留手机号" value="" />
            </div>

            
          </form>
          <div class="form-group col-md-12">
              <button id="submitbtn-a" class="btn btn-success">确 定</button>
            </div>
          </div>
          
          
          <div id="donate-book" class="donate-book float-left hidden">
          <form name="addBook" id="addBook" class="addBook">
            <input name="donate_book_id" id="donate_book_id" type="hidden">
            <div class="form-group col-md-12">
              <label for="isbn">ISBN - 国际标准书号</label>
              <input class="form-control" type="text" id="isbn" name="isbn" placeholder="输入书籍ISBN可自动获取其他内容" value="" style="width:350px;" />
            </div>
            <div class="form-group col-md-12">
              <label for="book_name">书籍名称</label>
              <input class="form-control" type="text" id="book_name" name="book_name" placeholder="书籍名称" value="" />
            </div>
            <div class="form-group col-md-12">
              <label for="book_count">捐赠数量</label>
              <input class="form-control" type="text" id="book_count" name="book_count" placeholder="请填写整数，最少为1" value="" />
            </div>

          </form>
          <div class="form-group col-md-12">
              <button id="submitbtn-b" class="btn btn-success">确 定</button>
              <button id="submitbtn-c" class="btn btn-info">完成添加</button>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="col-lg-6 hidden" id="bookmsg">
      <div class="card">
        <div class="card-body">
            <label for="">以下将为您展示所填书籍的基本信息，方便您核对！</label>
            <div id="bmsg"></div>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="row float-none hidden" id="booklist">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
            已添加书籍
            <div class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>书名</th>
				  <th>ISBN</th>
				  <th>数量</th>
                </tr>
              </thead>
              <tbody id="tbody">
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  
</div>
<script type="text/javascript" src="/Public/Admin/js/jquery.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/perfect-scrollbar.min.js"></script> 
<!--时间日期选择器--> 
<script type="text/javascript" src="/Public/Admin/js/moment.js/moment.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/moment.js/locale/zh-cn.min.js"></script> 
<!--标签插件--> 
<script src="/Public/Admin/js/jquery-tagsinput/jquery.tagsinput.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/main.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/bootstrap-notify.min.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/lyear-loading.js"></script> 
<script type="text/javascript" src="/Public/Admin/js/plupload.full.min.js"></script> 
<script src="./Public/Home/ban.js"></script>
<script>
//添加基础信息
    $("#submitbtn-a").on('click',function(){
        $.post('?c=Donate&a=addDonateBook',$("#addDonate").serialize(),function(result){
            var res = JSON.parse(result);
            if(res.code==500){
                $.notify({
    		        // options
    		        message: res.msg,
    		        //url: '?c=User&a=showUser',
    		        //target: '_self'
		        },{
    		        // settings
    		        type: 'danger',
    		        delay: 5000,
    		        placement: {
    		        from: "top",
    		        align: "right"
    		        }
		        });
            }else if(res.code==200){
                //两个表单hidden互换
                $("#donate").toggleClass("hidden");
                $("#donate-book").toggleClass("hidden");
                //显示已添加书籍列表
                $("#booklist").toggleClass("hidden");
                $("#bookmsg").toggleClass("hidden");
                //步骤样式
                $("#step2").toggleClass("active");
                //向表单中添加捐赠id
                $("#donate_book_id").val(res.donate_book_id);
                //消息提示
                $.notify({
    		        // options
    		        message: '成功<br>接下来请添加捐赠书籍',
    		        //url: '?c=Activity&a=addActivityBookView&id='+id,
    		        target: '_self'
		        },{
    		        // settings
    		        type: 'info',
    		        delay: 0,
    		        placement: {
    		        from: "top",
    		        align: "right"
    		        }
		        });
		        //
            }
        });
    });
//捐赠书籍
    $("#submitbtn-b").on('click',function(){
        $.post('?c=Donate&a=addDonateBookDetail',$("#addBook").serialize(),function(result){
            var res = JSON.parse(result);
            if(res.code==500){
                $.notify({
    		        // options
    		        message: res.msg,
    		        //url: '?c=User&a=showUser',
    		        //target: '_self'
		        },{
    		        // settings
    		        type: 'danger',
    		        delay: 5000,
    		        placement: {
    		        from: "top",
    		        align: "right"
    		        }
		        });
            }else if(res.code==200){
                var bookname = $("#book_name").val();
                var bookcount = $("#book_count").val();
                var bookisbn = $("#isbn").val();
                //向下面append相关内容
                $("#tbody").append("<tr><th>《"+bookname+"》</th><th>"+bookisbn+"</th><th>"+bookcount+"本</th></tr>");
                //消息提示
                $.notify({
    		        // options
    		        message: '成功<br>添加了书籍 《'+bookname+'》 '+bookcount+'本',
    		        //url: '?c=Activity&a=addActivityBookView&id='+id,
    		        target: '_self'
		        },{
    		        // settings
    		        type: 'info',
    		        delay: 0,
    		        placement: {
    		        from: "top",
    		        align: "right"
    		        }
		        });
		        //清空输入框
		        var bookname = $("#book_name").val("");
                var bookcount = $("#book_count").val("");
                var bookisbn = $("#isbn").val("");
            }
        });
    });
//ISBN失焦获取信息
    $("#isbn").blur(function(){
        var bookisbn = $("#isbn").val();
        $.post('./ajax.php?do=getisbn',{"isbn":bookisbn},function(result){
            console.log(result);
            var res = JSON.parse(result);
            //向表单中加入
            $("#book_name").val(res.data.name);
            if(res.data.photoUrl==null || res.data.photoUrl==""){
                res.data.photoUrl = "";
            }
            if(res.data.author==null || res.data.author==""){
                res.data.author = "无作者信息";
            }
            if(res.data.publishing==null || res.data.publishing==""){
                res.data.publishing = "无出版社信息";
            }
            //向右边html
            var str = "<picture><img src='"+res.data.photoUrl+"' alt='封面' height='180' width='150'></picture><br><label>"+res.data.name+"</label><br><label>"+res.data.author+"</label><br><label>"+res.data.publishing+"</label>";
            $("#bmsg").html(str);
            $.notify({
    		        // options
    		        message: res.msg,
    		        //url: '?c=User&a=showUser',
    		        //target: '_self'
		        },{
    		        // settings
    		        type: 'info',
    		        delay: 3000,
    		        placement: {
    		        from: "top",
    		        align: "right"
    		        }
		        });
		    
        });
    });
//完成添加被点击
$("#submitbtn-c").click(function(){
    location.href="?c=User&a=donateBookList";
});
</script>
</body>
</html>